<!DOCTYPE html>
<html>
<head>
  <title>Entity Console</title>
  <link rel="stylesheet" href="base.css" type="text/css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="entity-console.js"></script>
  <script type="text/javascript">
    $(document).ready(window.ec.init);
  </script>
</head>
<body>
	<div class="nav">
		<button id="switchToAddProperty" type="button" onclick="window.ec.switchTo('#addProperty');" class="navButton">Add Property</button>
		<button id="switchToDeleteEntityKind" type="button" onclick="window.ec.switchTo('#deleteEntityKind');" class="navButton">Delete Entity Kind</button>
		<button id="switchToRenameProperty" type="button" onclick="window.ec.switchTo('#renameProperty');" class="navButton">Rename Property</button>
		<button id="switchToRenameKind" type="button" onclick="window.ec.switchTo('#renameKind');" class="navButton">Rename Kind</button>
		<button id="switchToSettings" type="button" onclick="window.ec.switchTo('#settings');" class="navButton">Settings</button>
	</div>
	<div id="content">
		<div id="addProperty" class="form">
			<h3>Add Property</h3>
			<table>
				<colgroup>
					<col width="40%"><col>
					<col width="60%"><col>
				</colgroup>
				<tr>
					<td><label for="kind">Entity Kind</label></td>
					<td><select size="1" name="kind"></select></td>
				</tr>
				<tr>
					<td><label for="propertyName">Property</label></td>
					<td><input type="text" name="propertyName"></input></td>
				</tr>
				<tr>
					<td><label for="propertyType">Type</label></td>
					<td><select size="1" name="propertyType">
							<option>Text string, short</option>
							<option>Text string, long</option>
							<option>floating point number</option>
							<option>integer</option>
							<option>Boolean</option>
							<option>Byte string, short</option>
							<option>Byte string, long</option>
							<option>Date and time</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><label for="initialValue">Initial Value</label></td>
					<td><input type="text" name="initialValue"></input></td>
				</tr>
				<tr>
					<td colspan="2">Advanced&nbsp;<button type="button" class="advancedButton">+</button></td>
				</tr>
				<tr class="advancedParameter" style="display: none">
					<td><label for="unindexed">Unindexed</label></td>
					<td><input type="checkbox" name="unindexed"></input></td>
				</tr>
				<tr class="advancedParameter" style="display: none">
					<td><label for="dataGenerator">Data Generator</label></td>
					<td><input name="dataGenerator" readonly="readonly" value="coming soon..."></input></td>
				</tr>
			</table>
			<button type="button" onclick="window.ec.runAddProperty();">Run</button>
			<button type="button" onclick="window.ec.verifyAddProperty();">Verify</button>
		</div>
		<div id="deleteEntityKind" class="form" style="display: none">
			<h3>Delete Entity Kind</h3>
			<table>
				<colgroup>
					<col width="40%"><col>
					<col width="60%"><col>
				</colgroup>
				<tr>
					<td><label for="kind">Entity Kind</label></td>
					<td><select size="1" name="kind"></select></td>
				</tr>
			</table>
			<button type="button" onclick="window.ec.runDeleteEntityKind();">Run</button>
			<button type="button" onclick="window.ec.verifyDeleteEntityKind();">Verify</button>
		</div>
		<div id="renameProperty" class="form" style="display: none">
			<h3>Rename Property</h3>
			<table>
				<colgroup>
					<col width="40%"><col>
					<col width="60%"><col>
				</colgroup>
				<tr>
					<td><label for="kind">Entity Kind</label></td>
					<td><select size="1" name="kind"></select></td>
				</tr>
				<tr>
					<td><label for="oldPropertyName">old Property</label></td>
					<td><input type="text" name="oldPropertyName"></input></td>
				</tr>
								<tr>
					<td><label for="newPropertyName">new Property</label></td>
					<td><input type="text" name="newPropertyName"></input></td>
				</tr>
				<tr>
					<td colspan="2">Advanced&nbsp;<button type="button" class="advancedButton">+</button></td>
				</tr>
				<tr class="advancedParameter" style="display: none">
					<td><label for="useTransactions">Use Transactions</label></td>
					<td><input type="checkbox" name="useTransactions"></input></td>
				</tr>
			</table>
			<button type="button" onclick="window.ec.runRenameProperty();">Run</button>
			<button type="button" onclick="window.ec.verifyRenameProperty();">Verify</button>
		</div>
		<div id="renameKind" class="form" style="display: none">
			<h3>Rename Kind</h3>
			<table>
				<colgroup>
					<col width="40%"><col>
					<col width="60%"><col>
				</colgroup>
				<tr>
					<td><label for="kind">Entity Kind</label></td>
					<td><select size="1" name="kind"></select></td>
				</tr>
				<tr>
					<td><label for="newKind">new Kind</label></td>
					<td><input type="text" name="newKind"></input></td>
				</tr>
				<tr>
					<td colspan="2">Advanced&nbsp;<button type="button" class="advancedButton">+</button></td>
				</tr>
				<tr class="advancedParameter" style="display: none">
					<td><label for="useTransactions">Use Transactions</label></td>
					<td><input type="checkbox" name="useTransactions"></input></td>
				</tr>
			</table>
			<button type="button" onclick="window.ec.runRenameKind();">Run</button>
			<button type="button" onclick="window.ec.verifyRenameKind();">Verify</button>
		</div>
		<div id="settings" class="form" style="display: none">
			<h3>Settings</h3>
			<p>Log Level: <select id="logLevel" size="1" name="logLevel">
					<option>OFF</option>
					<option>SEVERE</option>
					<option>WARNING</option>
					<option>INFO</option>
					<option>CONFIG</option>
					<option>FINE</option>
					<option>FINER</option>
					<option>FINEST</option>
					<option>ALL</option>
				</select>
				<button type="button" onclick="window.ec.setLogLevel();">Set Log Level</button>
			</p>
		</div>
	</div>
	<div id="info" class="info" style="display: none"></div>
</body>
</html>